<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/4/25
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <title>做题记录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css" media="all">

</head>
<body>

<script type="text/html" id="edit_form">

</script>
<div id="openProductBox" style="display: none; padding: 10px;">
    <table class="layui-hide" id="test" lay-filter="updateUserFormFilter"></table>
</div>
</body>
<div style="margin-bottom: 20px;">
    <form >
        <label>
            电话号码查询：<input type="text" name="tel">
        </label>

        <label>
            <button data-type="query_record">查询</button>
        </label>
    </form>
</div>

<div class="layui-btn-group demoTable">


    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>

</div>

<table id="demotest" class="layui-table" lay-data="{url: '${pageContext.request.contextPath}/record?method=findAll',
               page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    , curr: 1 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                }}"  lay-filter="demotest">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'id', width:80}">ID</th>
        <th lay-data="{field:'username', width:180}">测试人名字</th>
        <th lay-data="{field:'tel', width:180}">电话号码</th>
        <th lay-data="{field:'yqcode', width:180}">邀请码</th>
        <th lay-data="{field:'createtime', width:180}">测试时间</th>
        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">做题详情</a>

</script>




<script>
    layui.use(['table','form','upload'], function(){
        var table = layui.table;
        var form = layui.form;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demotest)', function(obj){
            var data = obj.data

            if(obj.event === 'detail'){
                //layer.msg('ID：'+ data.id + ' 的查看操作');
                layer.open({
                    title: '做题详情',
                    type: 1,
                    content: $('#openProductBox'),
                    area: ['500px', '300px'],
                    offset: ['100px', '50px'],
                    success: function(){
                            // 渲染table表格
                            table.render({
                                elem: '#test'
                                // 数据的格式 data   LayData
                                ,url:'${pageContext.request.contextPath}/record?method=topic&&id='+data.id
                                //,page:true
                                ,cols: [[
                                    {field:'srid', title: '编号', sort: true}
                                    ,{field:'id', title: '做题人编号'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                    ,{field:'scl_id', title: '题号', sort: true}
                                    ,{field:'scl_content', title: '题目内容', sort: true}
                                    ,{field:'result', title: '答案', sort: true}
                                ]]
                            });
                    }
                })
            }
        });

        var $ = layui.$, active = {
            getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
            ,query_scl:function (){
                alert(2222222)
            }
        };

    });


</script>

</html>
